<template>
	<view class="login">
		<!-- <image class="bg" src="../../static/img/bg.jpg" /> -->
		<view class="bg">
			<view class="loginBox1">
				<view class="login-top">
					<h2 class="login-top-h2">欢迎进入</h2>
					<p class="login-top-p">柚坛社区</p>
					<p class="login-top-p">你的玩机交流社群</p>
				</view>
			</view>
			<view class="loginBox2">
				<view class="title">
					<view class="button" :class="buttonChange == 0 ? 'button-a' : '' " @click="buttonClick(0)">登录</view>
					<view class="button" :class="buttonChange == 1 ? 'button-a' : '' " @click="buttonClick(1)">注册</view>
				</view>
				<login-a v-if="buttonChange == 0" @changeComponents="changeComponents"></login-a>
				<login-b v-if="buttonChange == 1"></login-b>
				<view style="position: absolute; left: 30px;">
					<view style="font-size: 15px;">可选择使用帐号:</view>
					<view style="font-size: 15px;">15092095518</view>
					<view style="font-size: 15px;">13070848717</view>
					<view style="font-size: 15px;">统一密码:maomaoquwanba123</view>
				</view>
				<view class="login-bottom" v-show="buttonChange == 0">
					<view class="login-bottom-content">
						<view class="content-a">其他方式登录</view>
						<view class="content-b">
							<view class="icon">
								<image src="../../static/img/QQ.png" class="icon-img" />
								<text class="icon-span">QQ</text>
							</view>
							<view class="icon">
								<image src="../../static/img/weibo.png" class="icon-img" />
								<text class="icon-span">微博</text>
							</view>
							<view class="icon">
								<image src="../../static/img/weixin.png" class="icon-img" />
								<text class="icon-span">微信</text>
							</view>
						</view>
					</view>
				</view>
			</view>
        </view>
	</view>
</template>

<script>
import LoginA from './components/A.vue'
import LoginB from './components/B.vue'
export default {
	name: 'Login',
	components: {
		LoginA,
		LoginB
	},
	data() {
		return {
			buttonChange: 0,
			user: []
		};
	},
	mounted() {
		this.$store.commit("intList");
	},
	methods: {
		buttonClick(e) {
			this.buttonChange = e;
		},
		changeComponents(e) {
			this.buttonChange = e;
		}
	}
}
</script>

<style lang="scss">
	.login{
		position: fixed;
		top: 0px;
		bottom: 0px;
		width: 100%;
		height: 100%;
	}
	.bg{
		width: 100%;
		position: absolute;
		background: url(../../static/img/bg.jpg) no-repeat;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-size: cover;
		// display: flex;
		// flex-direction: column;
	}
	.loginBox1{
		// position: absolute;
		height: 35%;
		// z-index: 99;
	}
	.login-top{
		color: #fff;
		height: 240rpx;
		width: 460rpx;
		margin-top: 60rpx;
		margin-left: 40rpx;
		letter-spacing:8rpx;
	}
	.login-top-h2{
		margin-bottom: 60rpx;
		font-size: 57rpx;
	}
	.login-top-p{
		margin-top: 10rpx;
		font-weight: 545;
		font-size: 38rpx;
	}
	.loginBox2{
		position: absolute;
		width: 100%;
		bottom: 0;
		background-color: #fff;
		height: 74%;
		border-radius: 40rpx 40rpx 0 0;
	}
	.title{
		display: flex;
		margin-top: 40rpx;
		margin-left: 50rpx;
	}
	.button{
		height: 60rpx;
		width: 120rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		color: #979797;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 500;
		font-family: '黑体'; 
	}
	.button-a{
		background-color: #FE6440;
		color: #fff;
	}
	.login-bottom{
		position: absolute;
		width: 100%;
		height: 160rpx;
		bottom: 0;
	}
	.login-bottom-content{
		height: 150rpx;
	}
	.content-a{
		font-size: 28rpx;
		color: #979797;
		text-align: center;
	}
	.content-b{
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}
	.icon{
		margin-right: 30rpx;
		margin-left: 30rpx;
		display: flex;
	}
	.icon-img{
		height: 38rpx;
		width: 38rpx;
		margin-right: 14rpx;
	}
	.icon-span{
		font-size: 30rpx;
	}
	
</style>
